import React, { Component } from 'react'

import { generateRandomString } from './utils'
import Header from './components/Header'
import List from './components/TodoList'
import Footer from './components/Footer'

import style from './index.module.css'

const initialTodos = [
  { id: 'bv2LBfNfFl', value: 'React', checked: false },
  { id: 'tBrIBgKu4l', value: '你好', checked: true },
  { id: '9FXIFbKJ69', value: 'Vue', checked: false },
];

export default class TodoList extends Component {
  state = {
    data: initialTodos,
  }

  handleAdd = (value) => {
    const { data } = this.state
    this.setState({ data: [{ id: generateRandomString(), value, checked: false }, ...data] })
  }

  handleChange = (data) => {
    this.setState({ data });
  }

  render() {
    const { data } = this.state;

    return (
      <div className={style.todoList}>
        <Header handleAdd={this.handleAdd} />
        <List data={data} handleChange={this.handleChange} />
        <Footer data={data} handleChange={this.handleChange} />
      </div>
    )
  }
}
